<template>
	<view class="content">
		<view class="drop" v-show="clickShow">
			<view class="shape"></view>
			<view class="dropItem">
				<image src="../../static/tabimg/mima.png" class="imgCode"></image>
				<view @tap="changepass">修改密码</view>
			</view>
			<view class="dropItem">
				<image src="../../static/tabimg/tuichu.png" class="imgCode2"></image>
				<view @tap="close">退出应用</view>
			</view>
		</view>
		<view class="uni-tab-bar">
			<!-- 主体导航 -->
			<swiper class="Roughing" :indicator-dots="true" indicator-color="#C1C2C6" indicator-active-color="#134199">
				<swiper-item>
					<view class="Roughingbox">
						<view class="itemhead num">{{rollingnum}}</view>
						<view class="stovebox scroll-Y">
							<view >
								<view class="bodyitem midtitle">轧号信息:</view>
								<view class="bodyitem" v-for="(item,k) in rolling" :key="k" :class="(k%2==0)?'' : 'addcol'">
									<view class="parameterTitle">{{item.name}}</view>
									<view class="parameterNum">{{item.num}}</view>
									<view class="titleinfo unit">{{item.unit}}</view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="Roughingbox">
						<view class="itemhead num">{{rollingnum}}</view>
						<view class="stovebox scroll-Y">
							<view >
								<view class="bodyitem midtitle">板坯信息:</view>
								<view class="bodyitem" v-for="(item,k) in slob" :key="k" :class="(k%2==0)?'' : 'addcol'">
									<view class="parameterTitle">{{item.name}}</view>
									<view class="parameterNum">{{item.num}}</view>
									<view class="titleinfo unit">{{item.unit}}</view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="Roughingbox">
						<view class="itemhead num">{{rollingnum}}</view>
						<view class="stovebox scroll-Y">
							<view >
								<view class="bodyitem midtitle">成品信息:</view>
								<view class="bodyitem" v-for="(item,k) in prod" :key="k" :class="(k%2==0)?'' : 'addcol'">
									<view class="parameterTitle">{{item.name}}</view>
									<view class="parameterNum">{{item.num}}</view>
									<view class="titleinfo unit">{{item.unit}}</view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>

</template>

<script>
	import {
		post
	} from '@/lib/Util.js'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				clickShow:false,
				rollingnum:'',
				//扎好信息
				rolling: [{
						name: '轧号',
						num: '---',
						unit: '/'
					},
					{
						name: '材质代码',
						num: '---',
						unit: '/'
					},
					{
						name: '钢卷去向',
						num: '---',
						unit: '/'
					},
					{
						name: '炉号',
						num: '---',
						unit: '/'
					},
					{
						name: '产品厚',
						num: '---',
						unit: '[mm]'
					},
					{
						name: '产品宽',
						num: '---',
						unit: '[mm]'
					},
					{
						name: '钢号',
						num: '---',
						unit: '/'
					},
					{
						name: '目标宽',
						num: '---',
						unit: '[mm]'
					},
					{
						name: '目标厚',
						num: '---',
						unit: '[mm]'
					},
					{
						name: '备注',
						num: '---',
						unit: '/'
					},
					{
						name: '板卷标志',
						num: '---',
						unit: '/'
					},
					{
						name: '数量',
						num: '---',
						unit: '/'
					}
				],
				slob: [
					{
						name: '钢卷号',
						num: '---',
						unit: '/'
					},
					{
						name: '板坯号',
						num: '---',
						unit: '[mm]'
					},
					{
						name: '板坯厚度',
						num: '---',
						unit: '[mm]'
					},
					{
						name: '板坯宽度',
						num: '---',
						unit: '[mm]'
					},
					{
						name: '板坯长度',
						num: '---',
						unit: '[mm]'
					},
					{
						name: '板坯序列',
						num: '---',
						unit: '/'
					},
					{
						name: '板坯总重',
						num: '---',
						unit: '[ton]'
					},
					{
						name: '冷热装标志',
						num: '---',
						unit: '/'
					},
					{
						name: 'C',
						num: '---',
						unit: '[%]'
					},
					{
						name: 'si',
						num: '---',
						unit: '[%]'
					},
					{
						name: 'Mn',
						num: '---',
						unit: '[%]'
					},
					{
						name: 'P',
						num: '---',
						unit: '[%]'
					},
					{
						name: 'S',
						num: '---',
						unit: '[%]'
					},
					{
						name: 'Cr',
						num: '---',
						unit: '[%]'
					},
					{
						name: 'Nb',
						num: '---',
						unit: '[%]'
					},
					{
						name: 'Ti',
						num: '---',
						unit: '[%]'
					},
					{
						name: 'Cu',
						num: '---',
						unit: '[%]'
					},
					{
						name: 'Ni',
						num: '---',
						unit: '[%]'
					},
					{
						name: 'Mo',
						num: '---',
						unit: '[%]'
					},
					{
						name: 'v',
						num: '---',
						unit: '[%]'
					}
				], //板坯信息
				//成品信息
				prod: [
					{
						name: '成品厚度',
						num: '---',
						unit: '[mm]'
					},
					{
						name: '上工差',
						num: '---',
					},
					{
						name: '成品宽度',
						num: '---',
						unit: '[mm]'
					},
					{
						name: '上工差',
						num: '---',
					},
					{
						name: '板卷标志',
						num: '---',
						unit: '/'
					},
					{
						name: '下工差',
						num: '---',
					},
					{
						name: '下工差',
						num: '---',
					},
					{
						name: '楔形',
						num: '---',
						unit: '/'
					}
				], 

			}
		},
		computed: mapState(['forcedLogin', 'hasLogin', 'userName']),
		methods: {
			//导航栏关闭应用事件
			...mapMutations(['logout']),
			close(){
				let _self = this;
				uni.showModal({
					title: '退出登录',
					content: '确定要退出吗？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							_self.logout();
							// #ifdef APP-PLUS  
							plus.runtime.quit();
							// #endif 
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			changepass(){
				uni.navigateTo({
					url:'/pages/changepass/changepass'
				})
			},
			//回退
			clickLeft() {
				uni.navigateBack({
					delta: 1,
					animationType: 'pop-out',
					animationDuration: 200
				});
			},
			async getmatid(val) {
				let res = await post('database/executeQuery', {
					sql: "select * from TB_PRIMARYDATA WHERE MATID =  '" + val + "'"
				})
				this.rolling[0].num = res.data[0].SCHID;
				this.rolling[1].num = res.data[0].QUALITYCODE;
				this.rolling[2].num= res.data[0].STOREDIR;
				this.rolling[3].num = res.data[0].CASTNO;
				this.rolling[4].num = res.data[0].PRODUCTTHK;
				this.rolling[5].num = res.data[0].PRODUCTWID;
				this.rolling[6].num = res.data[0].STEELGRADE;
				this.rolling[7].num = res.data[0].COILWID;
				this.rolling[8].num = res.data[0].COILTHK;
				this.rolling[9].num = res.data[0].NOTES;
				this.rolling[11].num = res.data[0].SLABNUM;
				
				this.slob[0].num = res.data[0].MATID;
				this.slob[1].num = res.data[0].SLABNO;
				this.slob[2].num = res.data[0].SLABTHK;
				this.slob[3].num = res.data[0].SLABWID;
				this.slob[4].num = res.data[0].SLABLEN;
				this.slob[5].num = res.data[0].BATCHSEQU;
				this.slob[6].num = res.data[0].TOTALWET;
				this.slob[7].num = res.data[0].HOTCHARGE;
				this.slob[8].num = res.data[0].C;
				this.slob[9].num = res.data[0].SI;
				this.slob[10].num = res.data[0].MN;
				this.slob[11].num = res.data[0].P;
				this.slob[12].num = res.data[0].S;
				this.slob[13].num = res.data[0].CR;
				this.slob[14].num = res.data[0].NB;
				this.slob[15].num = res.data[0].TI;
				this.slob[16].num = res.data[0].CU;
				this.slob[17].num = res.data[0].NI;
				this.slob[18].num = res.data[0].MO;
				this.slob[19].num = res.data[0].V;
				
				this.prod[0].num = res.data[0].COILTHK;
				this.prod[1].num = res.data[0].THKTOLUP;
				this.prod[2].num = res.data[0].COILWID;
				this.prod[3].num = res.data[0].WIDTOLUP;
				if(res.data[0].NEXTPROCESS=="1"){
					this.prod[4].num = "轧板";
					this.rolling[10].num= "轧板";
				}else if(res.data[0].NEXTPROCESS=="2"){
					this.prod[4].num = "轧卷"
					this.rolling[10].num= "轧卷";
				}
				this.prod[5].num = res.data[0].THKTOLLOW;
				this.prod[6].num = res.data[0].WIDTOLLOW;
				this.prod[7].num = res.data[0].WEDGE;
			}
		},
		onLoad(val) {
			this.rollingnum = val.id
			this.getmatid(val.id)
		},
		onNavigationBarButtonTap(e) {
			if(e.float=="right"){
				this.clickShow = !this.clickShow;
			}
		}
	}
</script>

<style>
	.stovebox {
		height: calc(100% - 160rpx);
	}

	.num {
		color: #134199;
		border-bottom: 2upx solid #C1C2C6;
		box-sizing: border-box;
	}

	.unit {
		color: #505153;
		width: 10%;
	}

	.parameterTitle {
		width: 40%;
	}

	.parameterNum {
		width: 50%;
		color: #134199;
	}
	
</style>
